<template>
  <div>当前点击次数：{{ count }}</div>
  <button @click="add">点击</button>
</template>

<script lang="ts">
// 知识点：
//    lang="ts"            指定 ts 书写环境
//    defineComponent      书写 Vue 组件支持 ts 提示和检查
import { defineComponent, ref } from 'vue'

export default defineComponent({
  // setup 组合式API的起点
  setup() {
    // 创建响应式数据(对象)
    // 等价于以前 data 结构中定义响应式数据
    const count = ref(0)

    // 创建函数/方法
    // 等价于以前 methods 结构中定义方法
    const add = () => {
      count.value++
    }

    // return 返回的数据才能在模板中使用
    return { count, add }
  },
})
</script>
